<template>
  <div class="animated fadeIn">
    <Table :columns="productColumn" :data="productData"></Table>
    <div class="page">
      <Page :total="totalCount" @on-change="changePage"></Page>
    </div>
  </div>
</template>

<script>
  import fetch from '../../utils/fetch'
  export default{
    data(){
      return{
        productColumn:[
          {
            title:'产品编号',
            key: 'prodCode'
          },
          {
            title:'图片',
            key:'',
            render:(h, params) =>{
              return h('div',[
                h('Img', {
                  attrs:{
                    src: params.row.prodImg
                  },
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style:{
                    width: '100px',
                    height: '100px',
                    marginTop: '5px',
                    marginBottom: '5px'
                  }
                })
              ])
            }
          },
          {
            title:'产品名称',
            key: 'prodName'
          },
          {
            title:'产品价格',
            key: 'price',
            render:(h, params)=>{
              return h('div',[
                h('span', {

                }, '￥' + params.row.price)
              ])
            }
          },
          {
            title:'会员折扣',
            key: 'disCount',
            render: (h, params)=>{
              return h('div', [
                h('span',{
                  style:{
                    color: 'red',
                    fontSize: '14px'
                  }
                }, params.row.disCount * 100 + '折优惠')
              ])
            }
          },
          {
            title:'状态',
            key: 'status',
            render:(h, params)=>{
              let row = params.row
              let statusTex = '销售中'
              let color = 'green'
              if(row.status === 2){
                statusTex = '已售罄'
                color = 'yellow'
              } else if(row.status === 3){
                statusTex = '已下架'
                color = 'red'
              }
              return h('div', [
                h('Tag', {
                  props:{
                    checkable:'true',
                    color:color
                  }
                }, statusTex),
               ]);
            }
          }
        ],
        productData:[],
        totalCount: 0
      }
    },
    created(){
      this.handleGetProduct(0)
    },
    methods:{
      handleGetProduct(currentPage){
        fetch('/api/product/list').then(response => {
          if(response.data.success)
          {
            this.productData = response.data.data.content
            this.totalCount = response.data.data.totalElements
          }
        })
      }
    }
  }
</script>
<style>
  .page{
    margin-top: 30px;
    float: right;
  }
</style>